@media print{
    #debug{
        display:none;
    }
}

@mainBarHeight:24px;
@buttonButtonBarHeight:@mainBarHeight+6px;
@notice:#ffff66;
@trace:#555;
@query:#00ffff;
@error:#ff0000;
@warning:#ff9900;

.transition(@pProp, @pDuration)
{
    -webkit-transition: @pProp @pDuration;
    -moz-transition: @pProp @pDuration;
    -ms-transition: @pProp @pDuration;
    -o-transition: @pProp @pDuration;
    transition: @pProp @pDuration;
}

#debug pre{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
#debug{
    z-index:999;
    position:fixed;
    bottom:0;
    right:0;
    font-size:12px;
    outline:none;
    overflow:hidden;
    width:500px;
    border-top:solid 1px #ddd;
    border-left:solid 1px #ddd;
    height:@mainBarHeight+(2*3px);
    background:rgba(236, 241, 240, .4);

    .transition(all, .3s);

    *{
        font-family:Arial, Helvetica, sans-serif;
    }


    &.maximized, &.fullscreen{
        background:rgb(236, 241, 240);
        width:100%;
        .debug_bar{
            .debug_control{
                a{
                    &.debug_toggle{
                        background-image: url("");
                    }
                }
            }
        }
    }

    &.maximized{
        border-left:none;
        height:350px;
    }

    &.fullscreen{
        border:none;
        height:100%;
        .debug_bar{
            .debug_control{
                a{
                    &.debug_fullscreen{
                        display:none;
                    }
                }
            }
        }
    }

    .clear{
        clear:both;
    }

    .debug_bar{
        height:30px;
        .debug_global{
            height:@mainBarHeight;
            padding:3px;
            float:left;
            span{
                display:inline-block;
                height:@mainBarHeight;
                line-height: @mainBarHeight;
                padding-left:@mainBarHeight+4px;
                background-repeat:no-repeat;
                background-position:left bottom;
                background-size:@mainBarHeight;
                margin-left:4px;
                &.debug_memory{
                    background-image: url("");
                }

                &.debug_time{
                    background-image: url("");
                }
            }
        }
        .debug_control{
            float:right;
            height:@mainBarHeight;
            padding:3px;
            a{
                display:inline-block;
                height:@mainBarHeight;
                line-height: @mainBarHeight;
                cursor: pointer;
                background-size:@mainBarHeight;
                width:@mainBarHeight;

                &.debug_close{
                    background-image: url("");
                }
                &.debug_toggle{
                    background-image: url("");
                }
                &.debug_fullscreen{
                    background-image: url("");
                }
            }
        }
    }

    .debug_buttons{

        height:@buttonButtonBarHeight;
        padding:0 5px;

        &>div{
            background: #fefefe;
            display:inline-block;
            padding:5px 10px;
            border:solid 1px;
            border-left-width:5px;
            margin:0 4px 0 0;
            cursor:pointer;
            float:left;
            &[rel="trace"]{
                border-color:@trace;
            }
            &[rel="notice"]{
                border-color:@notice;
            }
            &[rel="warning"]{
                border-color:@warning;
            }
            &[rel="error"]{
                border-color:@error;
            }
            &[rel="query"]{
                border-color:@query;
            }

            &.disabled{
                opacity:.5;
            }

            &.vars{
                float:right;
                margin:0 0 0 4px;
            }
        }
    }

    .debug_content{
        overflow:hidden;
        padding:5px;
        height:~"calc(100% - "(@mainBarHeight + (3px*2)+ @buttonButtonBarHeight + 10px) ~")";
        -webkit-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .3);
        -moz-box-shadow: inset 0 2px 2px rgba(0, 0, 0, .3);
        box-shadow: inset 0 2px 2px rgba(0, 0, 0, .3);
        background:#ffffff;

        .debug_console{
            height:100%;
            overflow:auto;
            width:~"calc(70% - 1px)";
            border-right:solid 1px #efefef;
            float:left;

            .console{
                border-collapse: collapse;
                width:100%;
                tr{
                    &.odd
                    {
                        td{
                            background: #f8fdf9;
                        }
                    }
                    td{
                        padding:5px 10px;
                        border-bottom:solid 1px #e8e8e8;
                        &.date{
                            width:90px;color:#666;
                        }
                        &.file{
                            width:160px;text-align: right;
                        }
                        &.trace{
                            background:@trace;
                        }
                        &.notice{
                            background:@notice;
                        }
                        &.warning{
                            background:@warning;
                        }
                        &.error,&.exception{
                            background:@error;
                        }
                        &.query{
                            background: @query;
                        }
                        &.trace, &.notice, &.warning, &.error, &.query, &.exception{
                            padding:0;width:7px;
                            border-bottom:none;
                        }
                    }
                }
            }
        }

        .debug_vars{
            height:100%;
            overflow:auto;
            width:calc(~"30% - 10px");
            padding:5px;
            float:right;
        }
    }
}

